<template>
  <div class="recommend">
    <div class="recommend_title">
      <div class="title">
        <h2>EDITOR'S SELECTION</h2>
        <p>
          <svg class="icon hot" aria-hidden="true">
            <use xlink:href="#icon-hot"></use>
          </svg>
          推荐文章
        </p>
      </div>
      <div class="bg"></div>
    </div>
    <div class="recommend_main">
      <template v-for="item in props.recommendArticle" :key="item.id">
        <Cover
          @click="toArticleDetail(item.id)"
          v-if="props.recommendArticle.length !== 0"
          :article="item"
          :isShowIcon="true"
          pcWidth="45%"
          pcHeight="390px"
          mobileWidth="100%"
          mobileHeight="370px"
        />
      </template>
    </div>
  </div>
</template>

<script setup>
  import { useRouter } from 'vue-router'
  import Cover from '@/components/Cover.vue'
  const props = defineProps({
    recommendArticle: {
      type: Array,
      default: () => [],
    },
  })
  const router = useRouter()
  const toArticleDetail = id => {
    router.push(`/article/${id}`)
  }
</script>

<style lang="less" scoped>
  @media only screen and (min-width: 991px) {
    .recommend {
      position: relative;
      display: flex;
      justify-content: space-around;
      width: 100%;
      height: 384px;
      margin-top: 35px;
      margin-bottom: 50px;
      .recommend_title {
        width: 250px;
        height: 384px;
        overflow: hidden;

        .title {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          width: calc(100% - 10px);
          height: calc(100% - 10px);
          z-index: 15;
          background: var(--background-primary);
          opacity: 0.9;
          margin: 5px;
          border-radius: 10px;
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
            var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

          h2 {
            margin: 0;
            background-image: linear-gradient(
              130deg,
              rgb(36, 198, 220),
              rgb(84, 51, 255) 41.07%,
              rgb(255, 0, 153) 76.05%
            );
            background-clip: text;
            color: transparent;
            font-size: 30px;
            font-weight: normal;
            text-align: center;
          }

          p {
            margin: 0;
            margin-top: 10px;
            font-size: 25px;
            color: var(--text-bright);
            font-weight: 800;
          }
        }

        .bg {
          position: absolute;
          top: 0;
          z-index: 1;
          box-sizing: border-box;
          width: 250px;
          height: 100%;
          border-radius: 15px;
          background: linear-gradient(
            130deg,
            rgb(36, 198, 220),
            rgb(84, 51, 255) 41.07%,
            rgb(255, 0, 153) 76.05%
          );
        }
      }
      .recommend_main {
        flex: 1;
        display: flex;
        justify-content: space-around;
      }
    }
  }

  @media only screen and (max-width: 990px) {
    .recommend {
      position: relative;
      width: 100%;
      // height: 215px;
      margin-top: 20px;

      .recommend_title {
        width: 100%;
        height: 180px;
        overflow: hidden;

        div {
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          width: calc(100% - 10px);
          height: calc(100% - 10px);
          z-index: 15;
          background: var(--background-primary);
          opacity: 0.9;
          margin: 5px;
          border-radius: 10px;
          box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
            var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);

          h2 {
            margin: 0;
            background-image: linear-gradient(
              130deg,
              rgb(36, 198, 220),
              rgb(84, 51, 255) 41.07%,
              rgb(255, 0, 153) 76.05%
            );
            background-clip: text;
            color: transparent;
            font-size: 30px;
            font-weight: normal;
            text-align: center;
          }

          p {
            margin: 0;
            margin-top: 10px;
            font-size: 25px;
            color: var(--text-bright);
            font-weight: 800;
          }
        }

        span {
          position: absolute;
          top: 0;
          z-index: 1;
          box-sizing: border-box;
          width: 100%;
          height: 180px;
          border-radius: 15px;
          background: linear-gradient(
            130deg,
            rgb(36, 198, 220),
            rgb(84, 51, 255) 41.07%,
            rgb(255, 0, 153) 76.05%
          );
        }
      }
    }
  }
</style>
